import mountElement from './mountElement';
import updateElementNode from './updateElementNode';

/*
 * @author: yang long
 * @date: 2022-07-19 14:23:57
 * @description: 虚拟dom 转 真实dom
 * @virtualDOM {type}: 虚拟dom
 */
export default function createDOMElement(virtualDOM) {
  let newElement = null;

  if (virtualDOM.type === 'text') {
    // 创建 文本节点
    newElement = document.createTextNode(virtualDOM.props.textContent);
  } else {
    // 创建 元素节点
    newElement = document.createElement(virtualDOM.type);

    // 给元素节点添加属性
    updateElementNode(newElement, virtualDOM);
  }

  // 将虚拟dom绑定到元素的一个自定义属性上，下一次diff的时候获取旧的virtualDOM就很方便
  newElement._virtualDOM = virtualDOM;

  // 递归创建子节点
  virtualDOM.children.forEach((child) => {
    // 因为不确定子元素是 NativeElement 还是 Component 所以调用 mountElement 方法进行确定
    mountElement(child, newElement);
  });

  // 处理 ref
  if (virtualDOM.props && virtualDOM.props.ref) {
    virtualDOM.props.ref(newElement);
  }

  return newElement;
}
